// 思路：判断点击是否在里面还是在外面，如果在外面则为true，否则为false
import { ref, onMounted, onUnmounted, Ref } from 'vue'
function useClickOutside(ElementRef: Ref<null | HTMLElement>) {
  const isClickOutside = ref(false)
  const handler = (e: MouseEvent) => {
    if (ElementRef.value) {
      // contains  包含
      // ElementRef dom节点
      if (ElementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutside
}

export default useClickOutside
